<template>
  <GlobalBG title="我的" :showHeader="false" :showCollege="false">
    <view class="container-my">
      <view class="header-content">
        <view class="header">
          <image
            class="avatar"
            :src="userInfo.avatarUrl || '/static/images/empty.png'"
            mode="aspectFill"
          >
          </image>
          <view class="user-info">
            <view class="name">{{ userInfo.name }}</view>
            <view class="department">
              <!-- {{ userInfo.name }}<br /> -->
              {{ userInfo.department }}
            </view>
          </view>
        </view>
      </view>

      <view class="content">
        <view class="conten-item-box">
          <view
            class="info-item bline"
            @click="gotoRoute('/pages/profile/infopage/passwordAndTel')"
          >
            <view class="icon">
              <image
                width="53rpx"
                height="53rpx"
                src="/static/images/xgjd/p1.png"
                mode="widthFix"
              />
            </view>
            <view class="text">账号安全</view>
            <view class="arrow">
              <uni-icons type="arrowright" color="#ccc" size="18"></uni-icons>
            </view>
          </view>
          <view
            class="info-item bline"
            @click="gotoRoute('/pages/profile/infopage/systemConfig')"
          >
            <view class="icon">
              <image
                width="53rpx"
                height="53rpx"
                src="/static/images/xgjd/p2.png"
                mode="widthFix"
              />
            </view>
            <view class="text">系统设置</view>
            <view class="arrow">
              <uni-icons type="arrowright" color="#ccc" size="18"></uni-icons>
            </view>
          </view>
          <view
            class="info-item bline"
            @click="gotoRoute('/pages/profile/infopage/help')"
          >
            <view class="icon">
              <image
                width="53rpx"
                height="53rpx"
                src="/static/images/xgjd/p3.png"
                mode="widthFix"
              />
            </view>
            <view class="text">帮助与反馈</view>
            <view class="arrow">
              <uni-icons type="arrowright" color="#ccc" size="18"></uni-icons>
            </view>
          </view>
          <view
            class="info-item"
            @click="gotoRoute('/pages/profile/infopage/version')"
          >
            <view class="icon">
              <image
                width="53rpx"
                height="53rpx"
                src="/static/images/xgjd/p4.png"
                mode="widthFix"
              />
            </view>
            <view class="text">版本信息</view>
            <view class="arrow">
              <uni-icons type="arrowright" color="#ccc" size="18"></uni-icons>
            </view>
          </view>
        </view>

        <view class="info-item login-out" @click="handleLogout">
          <view class="text">退出登录</view>
        </view>
      </view>
    </view>
  </GlobalBG>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/stores/user';
import { onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';

const userStore = useUserStore();
// const { userInfo } = storeToRefs(userStore)
// 用户信息
const userInfo = ref({
  avatarUrl: '', // 替换为实际头像地址
  name: '',
  department: '',
  subDepartment: '',
  role: '',
});

// 页面显示时验证登录状态
onShow(async () => {
  let currUserInfo: any = await userStore.getUserInfo();
  console.log(currUserInfo);
  if (currUserInfo) {
    userInfo.value.avatarUrl = currUserInfo.avatar || '';
    userInfo.value.name = currUserInfo.username;
    userInfo.value.department = currUserInfo.subDepartment;
    // userInfo.value.subDepartment = currUserInfo.org.sub_orgs ? currUserInfo.org.sub_orgs.org_mc : '';
    // userInfo.value.role = currUserInfo.tb_roles.map(item => item.role_mc).join(',');
  }
});

const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        userStore.logout();
        // 清除所有本地存储数据（可选，根据需求决定是否全部清除）
        uni.clearStorageSync();
        uni.reLaunch({ url: '/pages/login/index' });
      }
    },
  });
};

// 查看版本信息
const gotoRoute = (path: String) => {
  uni.navigateTo({ url: path });
};
</script>

<style lang="scss" scoped>
.container-my {
  display: flex;
  flex-direction: column;

  .header-content {
    background: #fff;
  }

  .header {
    box-sizing: border-box;
    height: 442rpx;
    display: flex;
    align-items: center;
    padding-left: 61rpx;
    padding-top: 50rpx;
    box-shadow: 0rpx 0rpx 56rpx 0rpx rgba(70, 102, 149, 0.06);
    background: url('/static/images/xgjd/prbg.png') no-repeat;
    background-size: 405rpx 443rpx;
    background-position: right bottom;

    .avatar {
      width: 130px;
      height: 130px;
      border-radius: 50%;
      margin-right: 58rpx;
    }

    .user-info {
      flex: 1;

      .name {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 46rpx;
        color: #333333;
        line-height: 63rpx;
        margin-bottom: 21rpx;
      }

      .department {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 27rpx;
        color: #666666;
        line-height: 38rpx;
      }
    }

    .role {
      height: 46rpx;
      line-height: 46rpx;
      background: #ffffff;
      border-radius: 8rpx;
      min-width: 130rpx;
      text-align: center;
      font-weight: 400;
      font-size: 24rpx;
      color: #3b7cff;
    }
  }

  .content {
    display: flex;
    flex-direction: column;
    padding: 0 38rpx;
    margin-top: 38rpx;
    .conten-item-box {
      width: 100%;
      background: #ffffff;
      border-radius: 23rpx;
      margin-bottom: 38rpx;
      padding: 0rpx 34rpx 0 34rpx;
    }
    .info-item {
      display: flex;
      align-items: center;
      background-color: white;
      padding: 15rpx;
      margin-bottom: 10px;
      // border-radius: 23rpx;
      &.bline {
        height: 134rpx;
        border-bottom: 2rpx solid #ededed;
      }

      &.login-out {
        height: 115rpx;
        background: #ffffff;
        box-shadow: 0rpx 0rpx 56rpx 0rpx rgba(70, 102, 149, 0.06);
        border-radius: 23rpx;
        text-align: center;
        box-sizing: border-box;
      }

      .icon {
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 15px;
      }

      .text {
        flex: 1;
        font-size: 31rpx;
        color: #333333;
      }

      .arrow {
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ccc;
      }
    }
  }
}
</style>
